<template>
  <div id="login">
    <div class="login-info">
      <h1 class="logo">LOGO</h1>
      <el-carousel class="login-info__swiper" height="100%" arrow="never">
        <el-carousel-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.url">
        </el-carousel-item>
      </el-carousel>
      <section class="login-info__form">
        <h1>迈斯克科技有限公司</h1>
        <el-form :rules="loginInfoRules" ref="loginForm" :model="loginInfo">
          <el-form-item prop="name">
            <el-input v-model="loginInfo.name" @keyup.enter.native="login('loginForm')"
                      placeholder="请输入您的用户名/邮箱/手机号">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginInfo.password" @keyup.enter.native="login('loginForm')"
                      type="password" placeholder="请输入您的密码">
            </el-input>
          </el-form-item>
          <el-button type="primary" @click="login('loginForm')" :loading="loading.button">登 录</el-button>
          <br/>
          <el-button @click="dialog.show = true">系统试用</el-button>
          <footer>welcome home</footer>
        </el-form>
      </section>
    </div>

    <el-dialog
      center
      title="提示"
      :visible.sync="dialog.show"
      width="400px">
      <span>系统将会生成一个账号供您体验，所有数据均为测试数据。</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="touristLogin">进入系统</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: 'login',
    data() {
      return {
        dialog: {
          show: false
        },
        loading: {
          button: false
        },
        loginInfo: {},
        loginInfoRules: {
          name: [{ required: true, type: 'string', message: '请输入您的账户名', trigger: 'change' }],
          password: [{ required: true, type: 'string', message: '请输入您的密码', trigger: 'change' }]
        },
        banners: [
          { id: 1, url: require('../../../assets/home-banner.jpg') },
          { id: 2, url: require('../../../assets/chenlaoban.png') }
        ]
      };
    },
    methods: {
      /**
       * 游客登录
       */
      touristLogin() {
        this.loginInfo = {
          name: 'tourist',
          password: '123456'
        };
        this.login();
      },
      login(formname) {
        if (typeof formname === 'string') {
          this.$refs[formname].validate(valid => {
            if (valid) {
              this.loginApi();
            }
          });
        } else {
          this.loginApi();
        }
      },
      loginApi() {
        this.loading.button = true;

        this.$store.dispatch('Login', this.loginInfo)
          .then(() => {
            // TODO 如果是浏览是强迫退出，二次登录后是否跳转回原页面而不是首页
            this.$router.push({ path: '/admin/dashboard' });
            this.$zmessage.success('登陆成功');
            this.loading.button = false;
          })
          .catch(() => {
            this.loading.button = false;
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  #login {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    min-width: 1280px;
    background: url(../../../assets/home-bg.png) no-repeat center center;
    background-size: 100%;
    .login-info {
      position: relative;
      width: 730px;
      height: 485px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -30%);
      @at-root {
        .login-info__swiper {
          width: 347px;
          height: 420px;
          display: block;
          position: absolute;
          right: 0;
          top: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .login-info__form {
          width: 383px;
          height: 420px;
          position: absolute;
          top: 0;
          left: 0;
          background: #fff;
          border-radius: 3px 0 0 3px;
          h1 {
            color: #999;
            text-align: center;
            font-size: 16px;
            font-weight: normal;
            margin-top: 50px;
            margin-bottom: 20px;
            letter-spacing: 0.25em;
          }
          form {
            margin: 0 auto;
            width: 80%;
          }
          button {
            width: 100%;
            display: block;
            &:nth-of-type(1) {
              margin-top: 30px;
            }
          }
          footer {
            color: #2581e2;
            text-align: center;
            margin-top: 50px;
            font-size: 24px;
          }
        }
      }
    }
    .el-carousel__button {
      background: #2581e2;
    }
    .logo {
      width: 215px;
      height: 60px;
      position: absolute;
      top: -102px;
      left: 50%;
      margin-left: -108px;
      text-align: center;
      color: #fff;
    }
  }
</style>
